<template>
  <div>
    <div v-if="flag == 0">
      <el-container class="mec-list-container">
        <el-row class="mec-logo">
          <el-col :span="24">
            <img
              class="logo-img"
              src="https://devapi.jbkl.com/storage/logo.jpg"
            />
          </el-col>
        </el-row>
      </el-container>
      <div>
        <el-container class="mec-user-bar">
          <div class="mec-user-info">
            <div class="mec-user-logo">
              <img
                class="user-logo"
                :src="
                  getUserList.avatar ||
                  'https://devapi.jbkl.com/storage/20220221/UmBLE1p2roqLpjGtr54F6f6jfgIG7Za3UONjgZtR.png'
                "
              />
            </div>
            <div class="mec-divider"></div>
            <div class="mec-user-name">
              {{ getUserList.real_name || getUserList.username }}
            </div>
            <div class="mec-divider"></div>
            <!-- <div class="mec-user-msg">
              <vab-icon icon="bell-line" />
              2
            </div> -->
            <div class="mec-divider"></div>
            <div class="mec-user-btn">
              <el-button
                v-if="!getUserList.is_head"
                round
                size="mini"
                @click="groupRelation"
              >
                升级账号
              </el-button>
              <el-button
                v-else
                round
                size="mini"
                type="success"
                @click="groupRelation"
              >
                管理集团
              </el-button>
            </div>
            <div class="mec-user-btn">
              <el-button round size="mini" type="primary" @click="handleQuery">
                创建店铺
              </el-button>
            </div>
            <div class="mec-user-btn">
              <el-button round size="mini" type="danger" @click="logouts">
                退出登录
              </el-button>
            </div>
          </div>
        </el-container>
        <el-container class="mec-container">
          <el-row :gutter="20">
            <el-col
              v-for="(item, index) in mechanismList"
              :key="index"
              :lg="8"
              :md="8"
              :sm="8"
              style="width: 410px"
              :xl="6"
              :xs="24"
            >
              <el-card :body-style="{ padding: '0px' }" shadow="hover">
                <div class="mec-card-body" @click="selectOrganization(item)">
                  <div class="mec-tag-group">
                    <el-tag>
                      {{ item.mec_status_name }}
                    </el-tag>
                  </div>
                  <div class="mec-title">{{ item.mec_name }}</div>
                  <div class="mec-description">地址:{{ item.mec_address }}</div>
                  <div class="mec-description">
                    店铺类型:{{ item.mec_type_name }}
                  </div>
                  <div class="mec-expire">
                    <el-tag v-if="item.expire_at > 0" hit type="warning">
                      有效期至：{{ item.expire_at }}
                    </el-tag>
                    <el-tag v-else hit type="warning">有效期至：长期</el-tag>
                  </div>
                  <div class="mec-detail">
                    <el-button
                      :loading="loading"
                      type="primary"
                      @click="selectOrganization(item)"
                    >
                      进入机构
                    </el-button>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </el-container>
      </div>
    </div>
    <div v-if="flag == 1" style="width: 80%; margin-left: 10%">
      <MechanismAdd @showMain="showMain" />
    </div>
    <el-dialog title="提示" :visible.sync="dialogVisible" width="50%">
      <el-input
        v-model="head_name"
        class="input-with-select"
        placeholder="请输入集团名称"
      />
      <el-input
        v-model="auth_tel"
        class="input-with-select"
        placeholder="请输入机构创始人手机号"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="auth_telSbut(auth_tel)"
        />
      </el-input>
      <el-table
        ref="multipleTable"
        :data="tableData"
        style="width: 100%"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />

        <el-table-column label="机构联系人" prop="mec_contacts" width="120" />
        <el-table-column
          label="机构名称"
          prop="mec_name"
          show-overflow-tooltip
        />
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="mechanismSbut">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import {
    getMechanismList,
    setMec,
    searchMechanism,
    setHeadquarters,
  } from '@/api/mechanism'
  import { errcode } from '@/api/public'
  import MechanismAdd from './components/mechanismAdd.vue'
  import { logout } from '@/api/user'
  import { getUser } from '@/api/router'
  import store from '@/store'
  import { authentication } from '@/config'
  export default {
    name: 'SelectOrganization',
    components: {
      MechanismAdd,
    },
    data() {
      return {
        flag: 0,
        keywords: '',
        queryForm: {
          pageNo: 1,
          pageSize: 20,
          title: '',
        },
        list: [],
        loading: false,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        mechanismList: [],
        getUserList: {
          avatar: '',
        },
        dialogVisible: false,
        auth_tel: '',
        head_name: '',
        tableData: [],
        multipleSelection: [],
      }
    },
    computed: {},
    created() {
      this.Mechanism()
    },
    methods: {
      // 获取机构
      Mechanism() {
        getUser().then((e) => {
          this.getUserList = e.data
        })
        getMechanismList().then((res) => {
          this.mechanismList = res.data.list
        })
        errcode().then((k) => {
          window.localStorage.setItem('errcode', JSON.stringify(k.data))
        })
      },
      selectOrganization(e) {
        window.localStorage.setItem('work_week', JSON.stringify(e.work_week))
        window.localStorage.setItem('afternoon_end_time', e.afternoon_end_time)
        window.localStorage.setItem('morning_start_time', e.morning_start_time)
        window.localStorage.setItem(
          'afternoon_start_time',
          e.afternoon_start_time
        )

        window.localStorage.setItem('morning_end_time', e.morning_end_time)

        // work_start_time
        window.localStorage.setItem('mec_type', e.mec_type)
        window.localStorage.setItem('mec_name', e.mec_name)
        window.localStorage.setItem('mec_id', e.id)
        setMec(e.mec_code).then(async (res) => {
          if (res.code == 200) {
            try {
              this.loading = true
              window.localStorage.setItem('lang', JSON.stringify(res.data.lang))
              await store.dispatch('routes/setRoutes', authentication)
              await store.dispatch('user/getUserInfo')
              await this.$router.push('/')
            } finally {
              this.loading = false
            }
          }
        })
      },

      handleQuery() {
        this.flag = 1
        const parmas = {
          keywords: this.keywords,
        }
        getMechanismList(parmas).then((e) => {
          this.mechanismList = e.data.list
        })
      },
      logouts() {
        logout().then(() => {
          history.go(0)
        })
      },
      groupRelation() {
        if (this.getUserList.is_head) {
          //
        } else {
          this.dialogVisible = true
        }
      },
      auth_telSbut(value) {
        console.log(value)
        const data = {
          auth_tel: value,
        }
        searchMechanism(data).then((e) => {
          this.tableData = e.data
        })
      },
      toggleSelection(rows) {
        if (rows) {
          rows.forEach((row) => {
            this.$refs.multipleTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.multipleTable.clearSelection()
        }
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val
      },
      mechanismSbut() {
        const mec_ids = []
        this.multipleSelection.forEach((e) => {
          mec_ids.push(e.id)
        })

        const data = {
          mec_ids: JSON.stringify(mec_ids),
          head_name: this.head_name,
        }
        setHeadquarters(data).then(() => {
          this.dialogVisible = false
          this.Mechanism()
        })
      },
      // 返回
      showMain(e) {
        this.flag = e
        this.Mechanism()
      },
    },
  }
</script>
<style lang="scss" scoped>
  .el-container {
    max-width: 1280px;
    min-width: 900px;
    margin: 0 auto;
    display: flex;
    position: relative;
    .mec-logo {
      height: 150px;
      padding: 0 20px;
      display: block;
      width: 100%;
      background: #ffffff;
      .logo-img {
        height: 150px;
      }
    }

    .mec-user-info {
      border-radius: 5px;
      padding: 8px 8px 8px 12px;
      background: #ffffff;
      display: flex;
      align-items: center;
      position: absolute;
      right: 0px;
      margin-top: 0px;
      .mec-user-logo {
        width: 20px;
        margin: 0 10px;
        .user-logo {
          width: 20px;
        }
      }
      .mec-divider {
        margin: 4px 6.5px;
        width: 1px;
        height: 12px;
        background-color: #e0e0e0;
      }
      .mec-user-msg,
      .mec-user-name,
      .mec-user-btn {
        margin: 0 10px;
      }
    }
  }
  .mec-user-bar {
    height: 44px;
    margin: 20px auto;
  }

  .mec-container {
    margin-top: 30px;
    .mec-card-body {
      position: relative;
      padding: $base-padding;
      cursor: pointer;
      .mec-tag-group {
        position: absolute;
        top: -10px;
        right: -10px;
        z-index: 9;
        padding: $base-padding * 1.5;
      }
      .mec-image-group {
        height: 200px;
        overflow: hidden;
        background: linear-gradient(to right, #0f2027, #203a43, #2c5364);

        .mec-image {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 200px;

          .isSvg {
            padding: 100px;
          }

          i {
            font-size: 100px;
            color: $base-color-white;
          }

          transition: all ease-in-out 0.3s;

          &:hover {
            transform: scale(1.1);
          }
        }
      }

      .mec-title {
        margin: $base-margin - 20 0 8px 0;
        overflow: hidden;
        font-size: 16px;
        font-weight: bold;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .mec-expire {
        margin: 15px 0 0;
        overflow: hidden;
        font-size: 14px;
        text-overflow: ellipsis;
        white-space: nowrap;

        s {
          color: #c5c8ce;
        }
      }

      .mec-description {
        display: -webkit-box;
        height: 15px;
        margin-top: $base-margin - 5px;
        overflow: hidden;
        font-size: 12px;
        line-height: 20px;
        color: #767676;
        text-overflow: ellipsis;
        box-orient: vertical;
        line-clamp: 2;
      }

      .mec-detail {
        float: right;
        margin-bottom: $base-margin - 9px;
      }
    }
  }
  .time {
    font-size: 13px;
    color: #999;
  }

  .bottom {
    margin-top: 13px;
    line-height: 12px;
  }

  .button {
    padding: 0;
    float: right;
  }

  .image {
    width: 100%;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }

  .clearfix:after {
    clear: both;
  }
</style>
